<template>
  <div class="layout">

    <div class="layout-header">
      <Affix>
        <div class="header-nav">
          <div class="header-nav-left">
            <span>{{ welcomeText }}</span>
            <span>
              <i class="ivu-icon ivu-icon-ios-telephone"></i>
              <label for="companyMoblie">全国服务热线:</label>
              <a id="companyMoblie" :href="callPhone">{{telphone}}</a>
            </span>
          </div>
          <div class="header-nav-right">
            <a :href="navMenu.home.url" class="active">{{ navMenu.home.name}}</a> |
            <a :href="navMenu.about.url">{{ navMenu.about.name}}</a> |
            <a :href="navMenu.favorites.url" @click="onClickAddFavorite()">{{ navMenu.favorites.name}}</a>
          </div>
        </div>
      </Affix>
      <Affix :offset-top="40">
        <div class="header-menu">
          <div class="header-menu-logo">
            <img src="./assets/logo.png" alt="logo">
          </div>
          <div class="header-menu-items">
            <ul>
              <li v-for="item in bannerMenus">
                <a :href="item.url" @click="onClickMenuItem(item)">{{ item.name }}</a>
              </li>
            </ul>
          </div>
          <div>
          </div>
        </div>
      </Affix>
    </div>

    <div class="layout-main">
      <router-view></router-view>
    </div>

    <div class="layout-footer">
      <span v-html="time"></span>
      <span v-html="addressInfo"></span>
      <span v-html="desc"></span>
    </div>

    <Back-top></Back-top>
  </div>
</template>

<script>
import $ from 'jquery'
import { app } from '@/datas'

export default {
  name: 'app',
  data () {
    return app
  },
  computed: {
    welcomeText: function () {
      return `欢迎来到${this.address}!`
    },
    callPhone: function () {
      return `tel:${this.telphone}`
    },
    addressInfo: function () {
      return `${this.address}&nbsp; &nbsp; &nbsp; &nbsp;`
    }
  },
  methods: {
    onClickMenuItem: function (item) {
      let height = ($(item.tag).offset() == null ? 0 : $(item.tag).offset().top - 115)

      height = height < 0 ? 0 : parseInt(height)
      // console.log(height)
      $('body').animate({ scrollTop: height }, 1000)
    },
    onClickHash (hashName) {
      window.location.hash = '#' + hashName
      return false
    },
    onClickAddFavorite () {
      try {
        window.external.addFavorite(app.favorite.url, app.favorite.title)
      } catch (e) {
        try {
          window.sidebar.addPanel(app.favorite.title, app.favorite.url, '')
        } catch (e) {
          this.$Notice.open({
            title: '收藏失败.',
            desc: '抱歉，您所使用的浏览器无法完成此操作。\n\n加入收藏失败，请使用Ctrl+D进行添加!'
          })
        }
      }
    }
  }
}
</script>

<style scoped>
.layout {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.layout-header {
  height: 120px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.header-nav {
  background: #252525;
  border-bottom: 1px solid #868686;
  height: 40px;
  line-height: 40px;
  padding: 0 18%;
  overflow: hidden;
}

.header-nav-left {
  float: left;
}

.header-nav-left span {
  color: #9ba7b5;
  padding-right: 2em;
}

.header-nav-left a {
  color: #ed9707;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
}

.ivu-icon-ios-telephone {
  font-size: 20px;
  color: #ed9707;
  vertical-align: middle;
}

.header-nav-right {
  float: right;
}

.header-nav-right a {
  color: #9ba7b5;
}

.header-nav-right a.active,
.header-nav-right a:hover {
  color: #ffffff;
}

.header-menu {
  background: #ffffff;
  height: 80px;
  line-height: 80px;
  padding: 0 18%;
  overflow: hidden;
}

.header-menu-logo {
  float: left;
  padding: 15px 0;
}

.header-menu-items {
  float: right;
}

.header-menu-items li {
  float: left;
  width: 110px;
  height: 80px;
  text-align: right;
  list-style: none;
}

.header-menu-items li a {
  color: #000000;
  height: 60px;
  font-size: 14px;
  display: inline-block;
}

.header-menu-items li a.active,
.header-menu-items li a:hover {
  color: #3677bd;
  border-bottom: 2px solid #3677bd;
}

.layout-main {
  margin-top: 120px;
}

.layout-footer {
  color: #9ea7b4;
  background: #252525;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .header-nav {
    padding: 0 2%;
  }
  .header-nav-left {
    display: none;
  }
  .header-nav-right {
    float: left;
  }

  .header-menu {
    padding: 0 2%;
  }
  .header-menu-items {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .header-nav {
    padding: 0 2%;
  }
  .header-menu {
    padding: 0 2%;
  }
}
</style>
